class Slider {
    constructor(id) {
        this.box = document.querySelector(id);
        this.picBox = this.box.querySelector("ul")
        this.indexBox = this.box.querySelector(".index-box");

        this.index = 0;
        this.init()
    }
    init() {
        console.log("slider init")

        this.initPoint();
    }

    initPoint() {
        const num = this.picBox.children.length;

        let frg = document.createDocumentFragment();

        for (let index = 0; index < num; index++) {
            let li = document.createElement("li");
            li.setAttribute("data-index", index + 1);
            if (index == 0) {
                li.className = "active"
            }
            frg.appendChild(li);
        }
        this.indexBox.children[0].style.width = num * 10 * 2 + "px"
        this.indexBox.children[0].appendChild(frg);

        this.indexBox.children[0].addEventListener("click", (e) => {
            console.log("point")
            let pointIndex = (e.target).getAttribute("data-index")
            console.log(e)
            console.log(pointIndex)
            this.indexBox = pointIndex;

        })
    }
}